<template>
  <div id="app">
    <HomeHeader></HomeHeader>

    <router-view />
    <div class="back-btn" @click="goBack" v-if="bthShow">
      <img src="../assets/image/back.png" alt="" />
    </div>
  </div>
</template>
<script setup>
import { watch, ref } from 'vue'
import { useRouter } from 'vue-router'
import HomeHeader from '@/components/Header.vue'
import emitter from '@/libs/mini3d/utils/mitt'

function goBack() {
  emitter.emit('startLoading')
  router.back()
}
let bthShow = ref(false)
const router = useRouter()
// 监听当前路由的name变化
watch(
  () => router.currentRoute.value.name,
  newRouterName => {
    // 每次切换的时候，都将three相关的缓存清除一下
    emitter.emit('destroyThree')
    if (newRouterName == 'province' || newRouterName == 'txmap') {
      bthShow.value = true
    } else {
      bthShow.value = false
    }
  },
  { immediate: true },
)
</script>
<style lang="scss">
* {
  padding: 0;
  margin: 0;
}

html,
body,
#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: rgb(1, 1, 25);
  text-align: center;
  line-height: 1;
}
.back-btn {
  position: absolute;
  left: 50%;
  bottom: 10%;
  transform: translate(-50%, 0);
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 100px;
  border: 2px solid rgba(0, 0, 0, 0.5);
  z-index: 1000;
  cursor: pointer;
}
.back-btn img {
  width: 50%;
  height: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>
